<template>
  <ul>
      <li v-for="product in products" :key="product.id">
          {{product.title}} - {{product.price}} - {{product.inventory}}
          <br>
            <button :disabled="!product.inventory" @click="addProductToCart(product)">
                加入购物车
            </button>
      </li>

  </ul>
</template>
<script>
export default {
  computed: {
    products() {
      return this.$store.getters.allProducts;
    }
  },
  methods: {
    addProductToCart(product){
      this.$store.dispatch("addProductToCart",product)
    }
  },
  created() {
    this.$store.dispatch("getAllProducts");
  }
};
</script>
